<template>
  <el-card>
    <template #header>
      <span class="el-card-title">年度访问趋势图</span>
      <i-ep-close
        v-show="!panelSetIcon"
        class="el-icon-close"
        style="float: right; padding: 3px 0"
        @click="deletePanelItem"
      />
    </template>
    <div class="echarts h-full">
      <ECharts v-if="option" :option="option" :id="`LightLine` + props.id" />
    </div>
  </el-card>
</template>

<script lang="ts" setup>
import * as echarts from "echarts";
import { useRoute } from "vue-router";
import { isDarkMode } from "@/utils/index";
const emit = defineEmits(["deletePanelItemEvent"]);
const routeName = useRoute().name;

const props = defineProps({
  panelSetIcon: {
    type: Boolean,
    default: () => {
      return false;
    },
  },
  id: {
    type: String,
    default: () => {
      return "";
    },
  },
  url: {
    type: String,
    default: () => {
      return "";
    },
  },
  title: {
    type: String,
    default: () => {
      return "";
    },
  },
  params: {
    type: Object,
    default: () => {
      return {};
    },
  },
});
const { panelSetIcon, id, url } = toRefs(props);

function deletePanelItem() {
  emit("deletePanelItemEvent", id.value);
}

const option = ref();
onMounted(() => {
  //多线段（polyline=true），如图左侧连续一段：
  let yData = [222, 932, 66, 934, 111, 333, 0],
    xData = ["1月", "2月", "3月", "4月", "5月", "6月", "7月"],
    datacoords: any = [
      {
        coords: [],
      },
    ];
  for (var i = 0; i < xData.length; i++) {
    datacoords[0].coords.push([xData[i], yData[i]]);
  }
  option.value = {
    darkMode: true,
    layout: "none",
    animation: true, //控制动画示否开启
    animationDuration: 3000,
    animationEasing: "bounceOut", //缓动动画
    animationThreshold: 8, //动画元素的阈值
    backgroundColor: "transparent", // 给echarts图设置背景色
    tooltip: {
      trigger: "axis",
      backgroundColor: "rgba(0,0,0,.5)",
      borderColor: "transparent",
      axisPointer: {
        type: "cross",
        label: {
          backgroundColor: "rgba(0,0,0,.5)",
        },
      },
      textStyle: {
        color: "#fff",
        fontFamily: "DINLight",
        fontSize: 14,
      },
    },
    grid: {
      left: "3%", //图表距边框的距离
      right: "3%",
      top: "15%",
      bottom: "5%",
      containLabel: true,
    },
    xAxis: [
      {
        nameGap: 3,
        nameTextStyle: {
          color: isDarkMode(routeName) ? "rgba(255,255,255,.8)" : "#021E47",
          fontSize: 12,
        },
        type: "category",
        data: xData,
        boundaryGap: false, //从0开始
        axisLine: {
          onZero: true,
          rotate: 30, //坐标轴内容过长旋转
          interval: 1,
          lineStyle: {
            color: "#636E7C",
          },
        },
        axisLabel: {
          color: isDarkMode(routeName) ? "rgba(255,255,255,.8)" : "#999",
          fontSize: 12,
          fontFamily: "DINLight",
        },
        axisTick: {
          //坐标轴刻度颜色  x和y不交叉
          show: false,
        },
      },
    ],
    yAxis: [
      {
        name: "个",
        min: 0,
        max: function (value: any) {
          return Math.ceil(value.max / 5) * 5;
        },
        splitNumber: 5,
        type: "value",
        nameTextStyle: {
          color: isDarkMode(routeName)
            ? "rgba(255,255,255,.5)"
            : "rgba(0,0,0,.5)",
          // color: "rgba(255,255,255,.89)",
          fontSize: 12,
        },
        splitLine: {
          show: true,
          lineStyle: {
            color: isDarkMode(routeName)
              ? "rgba(255,255,255,.1)"
              : "rgba(0,0,0,.1)",
            type: "dashed",
          },
        },
        axisTick: {
          //坐标轴刻度颜色
          show: false,
        },
        axisLine: {
          //坐标轴线颜色
          show: true,
          lineStyle: {
            color: "#636E7C",
          },
        },
        axisLabel: {
          color: isDarkMode(routeName) ? "rgba(255,255,255,.8)" : "#999",
          fontSize: 12,
          fontFamily: "DINLight",
        },
      },
    ],
    series: [
      {
        name: "整体完成度",
        type: "line",
        smooth: false,
        lineStyle: {
          color: "#DC7828",
          width: 1,
          type: "dashed",
          shadowOffsetX: 0, // 折线的X偏移
          shadowOffsetY: 3, // 折线的Y偏移
          shadowBlur: 2, // 折线模糊
          shadowColor: "rgba(255, 255, 255, 0.8)", //设置折线阴影颜色
        },
        showSymbol: true, //是否默认展示圆点
        symbol: "circle", // 默认是空心圆（中间是白色的）
        symbolSize: 7,
        itemStyle: {
          color: isDarkMode(routeName) ? "#021E47" : "#fff", //实圆的背景色
          borderWidth: 1,
          borderColor: "#DC7828",
        },
        areaStyle: {
          color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
            {
              offset: 1,
              color: "rgba(220,120,40,0.8)",
            },
            {
              offset: 0.74,
              color: "rgba(220,120,40,0.5)",
            },
            {
              offset: 0,
              color: "rgba(220,120,40,0)",
            },
          ]),
        },
        emphasis: {
          focus: "series",
        },
        data: yData,
      },
      {
        showSymbol: false,
        name: "整体完成度",
        type: "lines",
        polyline: true,
        smooth: false,
        coordinateSystem: "cartesian2d",
        zlevel: 1,
        effect: {
          show: true,
          smooth: true,
          period: 6,
          symbolSize: 4,
        },
        lineStyle: {
          color: "#fff",
          width: 1,
          opacity: 0,
          curveness: 0,
          cap: "round",
        },
        data: datacoords,
      },
    ],
  };
});
</script>

<style lang="scss" scoped>
.el-card {
  height: 100%;
}
.el-card-title {
  font-weight: bold;
  font-size: 14px;
  color: lightslategrey;
}
:deep(.el-card__body) {
  height: 100% !important;
  padding: 0 !important;
}
:deep(.el-card__header) {
  padding: 10px;
}

.echarts {
  width: 100%;
  height: calc(100% - 45px);
  border-radius: 6px;
  box-shadow: 0 0 12px rgba(0, 0, 0, 0.04);
  padding: 15px;
}
</style>
